<template>
  <div class="nav-header">
    <div class="nav-header-content">
      <div class="back-button" @click="handleBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-title">{{ title }}</div>
      <div class="header-right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 定义组件属性
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 自定义返回逻辑
  customBack: {
    type: Function,
    default: null
  }
})

// 定义事件
const emit = defineEmits(['back'])

const router = useRouter()

// 处理返回按钮点击
const handleBack = () => {
  // 触发back事件
  emit('back')
  
  // 如果有自定义返回逻辑，则执行
  if (props.customBack) {
    props.customBack()
    return
  }
  
  // 默认返回上一页
  router.back()
}
</script>

<style scoped>
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background-color: white;
  max-width: 800px;
  margin: 0 auto;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.nav-header-content {
  max-width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  position: relative;
  box-sizing: border-box;
}

@media (min-width: 800px) {
  .nav-header-content {
    width: 800px;
  }
}

.back-button {
  position: absolute;
  left: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #323233;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
  margin-left: 12px;
}

.header-right {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
}
</style>